<template>
  <div>
    <div class="panel-head">
      <h3>{{ $t('exportData.exportDataList') }}</h3>
    </div>
    <div class="panel-export">
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1"> BSSID </a-menu-item>
        </a-menu>
        <a-button> BSSID <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>
    <div class="panel-tabel">
      <div class="panel-export-report">
        <a class="ant-dropdown-link" @click="exportExcel"
          ><icon-font type="ic-export" />&nbsp;{{ $t('exportData.exportList') }}
        </a>
      </div>
      <rj-table
        bordered
        :columns="columns"
        :data-source="data"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
      >
      </rj-table>
    </div>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
import { RjTable } from '@components';
import { export_json_to_excel } from '@components/excel/export2Excel';
import { mapState } from 'vuex';
import { i18nRender } from '@/locales';
const columns = [
  {
    title: i18nRender('wirelessExperience.deviceSno'),
    dataIndex: 'sn',
    width: '22%',
    align: 'center',
  },
  {
    title: 'AP MAC',
    dataIndex: 'apmac',
    width: '20%',
    align: 'center',
  },
  {
    title: 'Radio ID',
    dataIndex: 'radioId',
    width: '16%',
    align: 'center',
  },
  {
    title: 'SSID',
    dataIndex: 'ssid',
    width: '20%',
    align: 'center',
  },
  {
    title: 'BSSID',
    dataIndex: 'bssid',
    width: '22%',
    align: 'center',
  },
];
const data = [];
export default {
  data() {
    return {
      columns,
      data,
      tHeader: [['SSID', 'BSSID']],
      dataArr: [],
      filename: '',
      current: 1,
      pagination: {},
      loading: false,
    };
  },
  components: {
    'rj-table': RjTable,
  },
  mounted() {
    this.getTotalCount();
    this.getGroupInformation();
  },
  computed: {
    ...mapState('Group', ['groupId']),
  },
  methods: {
    //初始化页面展示数据
    async getTotalCount() {
      let group_id = this.groupId;
      this.loading = true;
      this.pagination = { total: 0 };
      const res = await requestHttp({
        api: `${maccApi.APMGT_APINFO}${group_id}/bssidinfo`,
        method: 'GET',
      });
      if (res.code != 0) {
        this.$message.error(res.msg || this.$t('exportData.getAPBSSIDFail'));
        return;
      }
      if (res.data.length > 0) {
        let page = {
          total: res.count,
          current: this.current,
          showSizeChanger: true,
          showQuickJumper: true,
        };
        this.pagination = page;
        let arr = [];
        for (const key in res.data) {
          arr.push([res.data[key].ssid, res.data[key].bssid]);
        }
        this.dataArr.push(arr);
        //遍历数据
        this.traverseData(res.data);
      } else {
        this.dataArr.push([]);
        this.loading = false;
        this.data = [];
      }
    },

    //分页获取数据
    async getApBssidListdata(page, perpage) {
      let group_id = this.groupId;
      this.data = [];
      this.pagination = { total: 0 };
      this.loading = true;
      const res = await requestHttp({
        api: `${maccApi.APMGT_APINFO}${group_id}/bssidinfo?page=${page}&per_page=${perpage}`,
        method: 'GET',
      });
      if (res.code != 0) {
        this.$message.error(res.msg || this.$t('exportData.getAPBSSIDFail'));
        return;
      }
      if (res.data.length > 0) {
        let page = {
          total: res.count,
          current: this.current,
          showSizeChanger: true,
          showQuickJumper: true,
        };
        this.pagination = page;
        this.traverseData(res.data);
      } else {
        this.loading = false;
      }
    },

    //获取网络名称
    async getGroupInformation() {
      let group_id = this.groupId;
      const res = await requestHttp({
        api: `${maccApi.GROUP}${group_id}`,
        method: 'GET',
      });
      if (res.code != 0) {
        this.$message.error(
          res.msg || this.$t('exportData.getNetworkNameFail')
        );
        return;
      }
      this.filename = res.groups.name;
    },

    //遍历数据
    traverseData(interdata) {
      let arr = [];
      for (const key in interdata) {
        let obj = {};
        obj.key = key;
        obj.sn = interdata[key].sn;
        obj.apmac = interdata[key].apMac;
        obj.radioId = interdata[key].radioId;
        obj.ssid = interdata[key].ssid;
        obj.bssid = interdata[key].bssid;
        arr.push(obj);
      }
      this.loading = false;
      this.data = arr;
    },

    //初始化导出数据页面
    handleMenuClick() {
      this.current = 1;
      this.getTotalCount();
    },

    handleTableChange(pagination) {
      this.current = pagination.current;
      this.getApBssidListdata(pagination.current, pagination.pageSize);
    },

    //获取指定时间戳转化的时间
    getCurrentTime(date) {
      let nowDate = new Date(date);
      let year = nowDate.getFullYear();
      let month =
        nowDate.getMonth() + 1 < 10
          ? '0' + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
      let day =
        nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate();
      let hour =
        nowDate.getHours() < 10 ? '0' + nowDate.getHours() : nowDate.getHours(); // 获取时
      let minutes =
        nowDate.getMinutes() < 10
          ? '0' + nowDate.getMinutes()
          : nowDate.getMinutes(); // 获取分
      let seconds =
        nowDate.getSeconds() < 10
          ? '0' + nowDate.getSeconds()
          : nowDate.getSeconds(); // 获取秒
      return year + month + day + hour + minutes + seconds;
    },

    exportExcel() {
      if (!this.data || this.data.length == 0) {
        this.$message.warn(this.$t('exportData.noData'));
        return;
      }
      export_json_to_excel({
        header: this.tHeader,
        data: this.dataArr,
        filename: `${this.filename}_${this.getCurrentTime(
          new Date().getTime()
        )}`,
        sheetname: [this.getCurrentTime(new Date().getTime())],
        autoWidth: true,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.panel-head {
  display: flex;
  justify-content: space-between;
  border-bottom: 0;
  background-color: #fff;
  padding: 16px 10px 0 10px;
  margin-bottom: 12px;
}
.panel-head h3 {
  display: inline;
  border-left: 2px solid #2b6afd;
  padding-left: 8px;
  font-size: 16px;
  color: #333;
}
.panel-export {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.panel-tabel {
  padding: 0 20px;
  /deep/ .ant-table-thead > tr > th {
    padding: 3px 16px;
  }
  /deep/ .ant-table-tbody > tr > td {
    padding: 3px 16px;
  }
}
.panel-export-report {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.ant-dropdown-link {
  flex: 1;
  text-align: right;
}
.pager {
  width: 100%;
}
.pagination {
  width: 458px;
  height: 27px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.btn {
  height: 25px;
  padding: 0 7px;
}
</style>
